import React, { Component, PureComponent } from 'react'

export default class Test extends Component {
  state = {
    msg: 'hello s',
    obj: {
      name: 'zs',
    },
  }
  // 只在更新阶段触发. 触发条件就是父组件更新,以及调用了自己的setState
  shouldComponentUpdate(nextProps, nextState) {
    //   return true则组件继续更新,return false则组件不继续更新
    //   注意: 其他的生命周期钩子,形参接收的都是旧的props和state.通过this.state和this.props拿到的是最新的数据,但是.在shouldComponentUpdate里面刚好相反.形参拿到的是最新的数据,this.props和this.state是旧数据
    //   console.log('新', nextProps)
    //   console.log('旧', this.props)
    //   if (nextProps.c === this.props.c) {
    //     return false
    //   } else {
    //     return true
    //   }
    console.log('新', nextState.obj.name)
    console.log('旧', this.state.obj.name)
    return (
      nextProps.c !== this.props.c ||
      nextState.msg !== this.state.msg ||
      nextState.obj.name !== this.state.obj.name
    )
  }
  render() {
    console.log('test更新了')
    return (
      <div>
        Test,<p>{this.props.c}</p>
        <p>{this.state.msg}</p>
        <p>{this.state.obj.name}</p>
        <button
          onClick={() => {
            this.setState({
              msg: 'xxxxxxxx',
            })
          }}
        >
          test按钮
        </button>
        <button
          onClick={() => {
            // this.state.obj.name = 'ls'
            const newObj = { ...this.state.obj }
            newObj.name = 'ls'
            this.setState({
              obj: newObj,
            })
          }}
        >
          test按钮-修改对象
        </button>
      </div>
    )
  }
}
